iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 15
1
Modern Web

前端UI軍火庫系列 第 15

[Day 15]Intro.js - 把建好的UI直接變成說明文件

  • 分享至 

  • xImage
  •  

在設計系統的時候,常常因為需求複雜或龐大,UI也會越來越複雜,變得不直覺、難以操作;這時候有個操作手冊就變得非常重要,但是前端的變化速度又非常快,往往導致操作手冊跟不上UI的變化,這時如果有個響導能帶著你走過所有步驟,又不用擔心隨著UI的改變而無法使用,那真是再好不過了!今天要介紹的Intro.js,就是一款能達到上述條件的神奇library。

開始使用Intro.js

首先先假設我們的UI程式碼如下

<div>
  <span>姓名</span>
  <input type="text">
</div>

<div>
  <span>Email</span>
  <input type="text">
</div>

<div>
  <input type="button" value="送出">
</div>

只是個很簡單的HTML表單,接著我們希望能告訴user操作的步驟,因此我們使用Intro.js來完成這個目標,在載入相關的css/js後,我們為每個步驟的div加上兩個attribute:data-stepdata-introdata-step的值為步驟的編號,data-intro的值為每個步驟的說明。

因此上面的HTML會改為

<div>
  <button id="start">
    ?說明
  </button>
</div>

<div data-step="1" data-intro="請先輸入姓名">
  <span>姓名</span>
  <input type="text">
</div>

<div data-step="2" data-intro="再輸入EMail">
  <span>Email</span>
  <input type="text">
</div>

<div data-step="3" data-intro="最後按下送出,就完成註冊囉">
  <input type="button" value="送出">
</div>

在這邊另外也加上了一個"說明"的按鈕,讓user按下時才會顯示每個步驟的提示。

最後我們在JavaScript為這個按鈕加上事件,並進行提示的步驟

document.getElementById('start').addEventListener('click', function() {
  introJs().start();
});

就大功告成啦!當我們案下"說明"按鈕後,就會看到以下畫面,提示user操作的步驟

http://ithelp.ithome.com.tw/upload/images/20161215/200206178I7FFCgHZu.png

程式碼DEMO: https://jsfiddle.net/wellwind/3jq4sw74/

是不是很方便啊!

進階使用Intro.js

Intro.js也有不少細節可以設定,官方網站上也有詳細的DEMO,以下簡單介紹兩個

加上ProgressBar

要加上ProgressBar很簡單,只要在start()之前加上setOption('showProgress', true)就可以了

introJs()
  .setOption('showProgress', true)
  .start();

加上提示點

我們可以在想要的element上加入data-hint屬性及說明文字

  <button id="start" data-hint="點說明按鈕開始導覽">
    ?說明
  </button>

然後用JavaScript啟用它:

introJs().addHints();

就能在目標上面加入一個明顯的提示點,當user按到這個提示點時,就能看到一個提示訊息囉

類似資源

  • Focusable:不具有像Intro.js的step by step特性,但可以很容易隨時幫助user把焦點放在某個位置上。
  • BootstrapTour:加上bootstrap風格的,非常具有彈性,但使用上就比較繁瑣一點。

文章同步發表於:https://dotblogs.com.tw/wellwind/2016/12/15/front-end-intro-js

不正經閒聊

終於賽程到了一半,給他撐過來啦!


上一篇
[Day 14]Reveal.js - 用前端技術完成酷炫簡報
下一篇
[Day 16]placehold.it - 規劃中網站用來暫時放圖片的線上服務
系列文
前端UI軍火庫31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言